<template>
	<view>
		<u-sticky offset-top="0" bgColor="#fff">
			<view class="search_header">
				<view class="search_status">
					<dropdown :list="options" :current="defaultOption" @onClick="selectOption"></dropdown>
				</view>
				<u-search class="search_input" v-model="searchValue" shape="square" height="55rpx" searchIconSize="40"
					@search="search" @custom="search"></u-search>
			</view>
		</u-sticky>

		<!-- 搜索数据展示 -->
		<view class="search_dataList" v-if="haveData">
			<!-- 瀑布流 -->
			<waterfall :dataList="searchDataList"></waterfall>
		</view>

		<view class="search_history" v-else>
			<!-- 搜索历史控件 -->
			<view class="history_control" v-if="historyList.length">
				<view>搜索历史</view>
				<u-icon name="trash" size="40" @click="cleanHistory"></u-icon>
			</view>
			<!-- 搜索历史 -->
			<view class="history_list">
				<view v-for="item in historyList" :key="item.id" @click="searchHistory(item.title)">{{item.title}}
				</view>
			</view>
		</view>

		<!-- <u-back-top :scroll-top="scrollTop" mode="square" right="5%"></u-back-top> -->
	</view>
</template>

<script>
	import guid from "utils/guid.js"
	import {
		productSearch,
		demandSearch
	} from "apis/farmer/search.js"
	import dropdown from "components/common/dropdown"
	import waterfall from 'components/waterfall/waterfall'
	export default {
		data() {
			return {
				//回到顶部
				scrollTop: 0,
				/* 下拉选项框的默认索引项 */
				defaultOption: 0,
				options: ["商品", "需求"],
				searchValue: '',
				historyList: [],
				searchDataList: [],
				/* 分页 */
				pageNo: 1,
				pageSize: 20
			}
		},

		components: {
			dropdown,
			waterfall
		},

		watch: {
			/* 输入内容修改时重置分页数据 */
			searchValue(newVal, oldVal) {
				if (newVal !== oldVal) {
					this.initSearch()
				}
			}
		},
		computed: {
			haveData() {
				return !!this.searchDataList.length
			},
			searchRequest(){
				if(this.defaultOption === 0) return productSearch
				return demandSearch
			}
		},
		methods: {
			async search() {
				let {
					searchValue,
					pageNo,
					pageSize
				} = this
				// 空格处理
				searchValue = searchValue.trim()
				if (!searchValue) return this.$errorMsg("输入为空")

				/* 查询并添加数据 */
				const {
					code,
					msg,
					data: result
				} = await this.searchRequest(searchValue, pageNo, pageSize)
				if (code !== 200) return this.$errorMsg(msg)
				this.searchDataList = [...this.searchDataList, ...result['list']]

				/* 修改页码和数量 */
				if (result['list'].length) {
					this.pageNo++
					this.pageSize = 10
				}

				/* 加载搜索历史 */
				this.addHistory(this.searchValue)
			},
			/* 修改选项卡 */
			selectOption(value) {
				this.defaultOption = Number(value)
				/* 修改选项卡时重置分页数据 */
				this.initSearch()
			},

			/*--------------- 搜索历史 --------------*/
			searchHistory(value) {
				this.searchValue = value
				this.search()
			},
			cleanHistory() {
				uni.setStorageSync('historyList', [])
				this.history = this.loadHistory();
			},
			loadHistory() {
				this.historyList = uni.getStorageSync('historyList') || []
			},
			addHistory(data) {
				data = data.trim()
				if (!data) return null
				const list = this.historyList.filter(item => {
					return item.title !== data
				})
				const historyData = {
					id: guid(),
					title: data
				}
				const newList = [historyData, ...list]
				uni.setStorageSync('historyList', newList)
				this.loadHistory()
			},
			/* 初始化搜索状态 */
			initSearch() {
				this.searchDataList = []
				this.pageNo = 1,
					this.pageSize = 20
			}

		},
		onLoad() {
			this.loadHistory();
		},
		onPageScroll(e) { //页面滚动
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() { //到达底部
			this.search()
		},
	}
</script>

<style scoped lang="scss">
	$fontColor: #535353;

	.search_header {
		width: 100%;
		height: 90rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		box-sizing: border-box;
		padding: 0 20rpx;
	}

	.search_status {
		min-width: 60rpx;
	}

	.search_history {
		width: 100%;
		min-height: 200rpx;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		color: $fontColor;

		.history_control {
			display: flex;
			height: 60rpx;
			align-items: center;
			justify-content: space-between;

		}
	}

	.history_list {
		display: flex;
		flex-flow: wrap;
		font-size: 26rpx;
		color: $fontColor;

		&>view {
			margin: 8rpx 14rpx;
			margin-left: 0;
			border-radius: 10rpx;
			background: #e8e8e8;
			min-width: 60rpx;
			padding: 4rpx 10rpx;
			display: grid;
			place-content: center;
		}
	}

	.search_dataList {
		width: 100vw;
		box-sizing: border-box;
		padding: 30rpx 5%;
	}
</style>
